<!DOCTYPE html>
<html lang="zh">

<head>
    <title>mybatis-tools文件生成器</title>
    <meta charset="UTF-8">
    <link href="../css/bootstrap-dark.css" crossorigin="anonymous" rel="stylesheet">
    <link href="../css/bootstrap-light.css" crossorigin="anonymous" rel="stylesheet" id="themeLinkId">
    <style>

    </style>
</head>

<body>
    <div>
        <div class="container">
            <!-- header -->
            <nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="mybatis-tools-nav">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">
                        <img src="../../images/icon.png" alt="" width="30" height="30"
                            class="d-inline-block align-text-top">
                        文件生成器
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link" href="#" onclick="jump('dbConfig')">数据库配置</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" onclick="jump('typeConfig')">数据类型映射</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#" onclick="jump('strategyConfig')">生成策略配置</a>
                            </li>
                        </ul>
                    </div>
                    <div class="d-flex">
                        <button onclick="changeTheme()" class="btn">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                class="bi bi-lightbulb" viewBox="0 0 20 20" id="lightThemeId" style="display: block;">
                                <path
                                    d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z" />
                            </svg>
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                class="bi bi-lightbulb-off" viewBox="0 0 20 20" id="darkThemeId" style="display: none;">
                                <path fill-rule="evenodd"
                                    d="M2.23 4.35A6.004 6.004 0 0 0 2 6c0 1.691.7 3.22 1.826 4.31.203.196.359.4.453.619l.762 1.769A.5.5 0 0 0 5.5 13a.5.5 0 0 0 0 1 .5.5 0 0 0 0 1l.224.447a1 1 0 0 0 .894.553h2.764a1 1 0 0 0 .894-.553L10.5 15a.5.5 0 0 0 0-1 .5.5 0 0 0 0-1 .5.5 0 0 0 .288-.091L9.878 12H5.83l-.632-1.467a2.954 2.954 0 0 0-.676-.941 4.984 4.984 0 0 1-1.455-4.405l-.837-.836zm1.588-2.653.708.707a5 5 0 0 1 7.07 7.07l.707.707a6 6 0 0 0-8.484-8.484zm-2.172-.051a.5.5 0 0 1 .708 0l12 12a.5.5 0 0 1-.708.708l-12-12a.5.5 0 0 1 0-.708z" />
                            </svg>
                        </button>
                    </div>
                </div>
            </nav>
        </div>
        <!-- 页面展示区域 -->
        <div>
            <div id="dbConfig" style="display: none;">
                <!-- 数据库配置 -->
                <div class="container">
                    <nav aria-label="db-nav">
                        <div class="nav nav-tabs" id="nav-db-config-tab" role="tablist">
                            <button class="nav-link active" id="nav-mysql-config-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-mysql-config" type="button" role="tab"
                                aria-controls="nav-mysql-config" aria-selected="true"
                                onclick="changeDbTab('mysql')">Mysql
                            </button>
                            <button class="nav-link" id="nav-oracle-config-tab" data-bs-toggle="tab"
                                data-bs-target="#nav-oracle-config" type="button" role="tab"
                                aria-controls="nav-oracle-config" aria-selected="false"
                                onclick="changeDbTab('oracle')">Oracle
                            </button>
                        </div>
                    </nav>
                    <!-- 数据库配置 -->
                    <div class="tab-content" id="nav-db-config-tabContent">
                        <div class="tab-pane fade show active" id="nav-mysql-config" role="tabpanel"
                            aria-labelledby="nav-mysql-config-tab">
                            <!-- mysql配置 -->
                            <form name="db-mysql">
                                <div class="row g-2">
                                    <div class="col-2">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">TAG</span>
                                            <input id="db_mysql_tag" type="text" name="tag" class="form-control"
                                                onchange="loadTagDbConfig('mysql')" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-12">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">URL</span>
                                            <input id="db_mysql_url" type="text" name="url"
                                                onchange="urlDecode('mysql')" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-4">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">Host</span>
                                            <input id="db_mysql_host" type="text" name="host" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">Port</span>
                                            <input id="db_mysql_port" type="number" name="port" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">Database</span>
                                            <input id="db_mysql_database" type="text" name="database"
                                                class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-2">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">User</span>
                                            <input id="db_mysql_user" type="text" name="user" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">Password</span>
                                            <input id="db_mysql_password" type="password" name="password"
                                                class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <p class="text-muted">提示：数据库连接暂不支持Mysql8.0版本的加密方式，如果是Mysql8.0以上版本请添加并使用Authentication
                                    Type: Standard的用户</p>
                                <div class="row g-2">
                                    <div class="col-1">
                                        <button type="button" class="btn btn-info" onclick="dbConnectTest('mysql')">连接测试
                                        </button>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-success" onclick="dbSave('mysql')">保存
                                        </button>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-primary" onclick="dbReset('mysql')">重置
                                        </button>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-primary" onclick="dbList('mysql')">配置列表
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- oracle配置 -->
                        <div class="tab-pane fade" id="nav-oracle-config" role="tabpanel"
                            aria-labelledby="nav-oracle-config-tab">
                            <form name=" db-oracle">
                                <div class="row g-2">
                                    <div class="col-2">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">TAG</span>
                                            <input id="db_oracle_tag" type="text" name="tag" class="form-control"
                                                onchange="loadTagDbConfig('oracle')" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-12">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">URL</span>
                                            <input id="db_oracle_url" type="text" name="url"
                                                onchange="urlDecode('oracle')" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-4">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">Host</span>
                                            <input id="db_oracle_host" type="text" name="host" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">Port</span>
                                            <input id="db_oracle_port" type="number" name="port" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="input-group mb-3">
                                            <span class="input-group-text">SID</span>
                                            <input id="db_oracle_sid" type="text" name="sid" class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-2">
                                        <div class="col-auto input-group mb-3">
                                            <label class="input-group-text" for="db_oracle_user">User</label>
                                            <input id="db_oracle_user" type="text" name="user" class="form-control" />
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="col-auto input-group mb-3">
                                            <label class="input-group-text" for="db_oracle_password">Password</label>
                                            <input id="db_oracle_password" type="password" name="password"
                                                class="form-control" />
                                        </div>
                                    </div>
                                </div>
                                <div class="row g-2">
                                    <div class="col-1">
                                        <button type="button" class="btn btn-info"
                                            onclick="dbConnectTest('oracle')">连接测试
                                        </button>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-success" onclick="dbSave('oracle')">保存
                                        </button>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-primary" onclick="dbReset('oracle')">重置
                                        </button>
                                    </div>
                                    <div class="col-1">
                                        <button type="button" class="btn btn-primary" onclick="dbList('oracle')">配置列表
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <!-- 数据库配置信息 -->
                    <div>
                        <table class="table" id="dbConfiglist">
                            <thead>
                                <tr>
                                    <th scope="col">tag</th>
                                    <th scope="col">host</th>
                                    <th scope="col">port</th>
                                    <th scope="col">jdbc-url</th>
                                    <th scope="col">operations</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <a href="#" onclick="openConfigFile()">打开配置文件</a>
                </div>
            </div>
            <!-- 数据类型配置 -->
            <div id="typeConfig" style="display: none;">
                <div class="container">
                    <div class="row g-2">
                        <div class="col-1">
                            <div class="form-check" onclick="listDataType('mysql')">
                                <input class="form-check-input" type="radio" name="dbType" id="flexRadioDefault1"
                                    value="mysql" checked>
                                <label class="form-check-label" for="flexRadioDefault1">
                                    mysql
                                </label>
                            </div>
                        </div>
                        <div class="col-1">
                            <div class="form-check" onclick="listDataType('oracle')">
                                <input class="form-check-input" type="radio" name="dbType" id="flexRadioDefault2"
                                    value="oracle">
                                <label class="form-check-label" for="flexRadioDefault2">
                                    oracle
                                </label>
                            </div>
                        </div>
                        <div class="col-1">
                            <button type="button" class="btn btn-success" onclick="addDataType()">新增</button>
                        </div>
                        <div class="col-1">
                            <button type="button" class="btn btn-success" onclick="saveDataType()">保存</button>
                        </div>
                        <div class="col-1">
                            <button type="button" class="btn btn-primary" onclick="listDataType()">配置列表</button>
                        </div>
                    </div>
                    <table class="table" id="type-table">
                        <thead>
                            <tr>
                                <th scope="col">data type</th>
                                <th scope="col">java type</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                    <a href="#" onclick="openConfigFile()">打开配置文件</a>
                </div>
            </div>
            <!-- 策略信息配置 -->
            <div id="strategyConfig" style="display: block;">
                <div class="container">
                    <form>
                        <div class="card">
                            <div class="card-header">
                                路径配置
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <div class=" input-group mb-3">
                                                <label class="input-group-text" for="projectPathId">生成路径</label>
                                                <input type="text" class="form-control" id="projectPathId" />
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class=" input-group mb-3">
                                                <label class="input-group-text" for="parentPackageId">顶级包</label>
                                                <input type="text" class="form-control" id="parentPackageId" />
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-3">
                                            <div class=" input-group mb-3">
                                                <label class="input-group-text" for="entityPathId">entity包</label>
                                                <input type="text" class="form-control" id="entityPathId" />
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group mb-3">
                                                <label class="input-group-text" for="interfacePathId">mapper接口包</label>
                                                <input type="text" class="form-control" id="interfacePathId" />
                                            </div>
                                        </div>
                                        <div class="col-4">
                                            <div class="input-group mb-3">
                                                <label class="input-group-text" for="xmlPathId">xml路径</label>
                                                <input type="text" class="form-control" id="xmlPathId" />
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group mb-3">
                                                <label class="input-group-text" for="servicePathId">service接口包</label>
                                                <input type="text" class="form-control" id="servicePathId" />
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <br>
                        <br>
                        <div class="card g-5">
                            <div class="card-header">
                                数据库配置
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <div class="row">
                                        <div class="col-1">
                                            <div class="form-check" onclick="listDbEnv('mysql')">
                                                <input class="form-check-input" type="radio" name="dbEnv"
                                                    id="listDbEnv1" value="mysql" checked>
                                                <label class="form-check-label" for="listDbEnv1">
                                                    mysql
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <div class="form-check" onclick="listDbEnv('oracle')">
                                                <input class="form-check-input" type="radio" name="dbEnv"
                                                    id="listDbEnv2" value="oracle">
                                                <label class="form-check-label" for="listDbEnv2">
                                                    oracle
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group mb-3">
                                                <span class="input-group-text">数据库环境</span>
                                                <select class="form-control form-select" id="dbEnvId">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group mb-3">
                                                <span class="input-group-text">表名</span>
                                                <input type="text" class="form-control" id="tableNameId" />
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group mb-3">
                                                <span class="input-group-text">前缀</span>
                                                <input type="text" class="form-control" id="tablePrefix" />
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <br>
                        <br>
                        <div class="card g-5">
                            <div class="card-header">
                                其他配置
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <div class="row g-2">
                                        <div class="col-1">
                                            <div class="form-check form-switch">
                                                <label class="form-check-label" for="isUseLombokId">lombok</label>
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="isUseLombokId" checked>
                                            </div>
                                        </div>
                                        <div class="col-1">
                                            <div class="form-check form-switch">
                                                <label class="form-check-label" for="isSwaggerId">swagger</label>
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="isSwaggerId">
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="input-group mb-3">
                                                <label for="classSuffixId" class="input-group-text">实体类后缀</label>
                                                <input type="text" class="form-control" id="classSuffixId" value="EO" />
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-check form-switch">
                                                <label class="form-check-label"
                                                    for="isMybatisPlusId">实体类是否使用MybatisPlus注解</label>
                                                <input class="form-check-input" type="checkbox" role="switch" checked
                                                    id="isMybatisPlusId">
                                            </div>
                                        </div>
                                        <div class="col-3">
                                            <div class="input-group">
                                                <label class="input-group-text" for="idTypeId">id生成类型</label>
                                                <select class="form-control form-select " id="idTypeId">
                                                    <option value="NONE">NONE</option>
                                                    <option value="AUTO">AUTO</option>
                                                    <option value="UUID">UUID</option>
                                                    <option value="INPUT">INPUT</option>
                                                    <option value="ID_WORKER">ID_WORKER</option>
                                                    <option value="ID_WORKER_STR">ID_WORKER_STR</option>
                                                </select>
                                            </div>
                                        </div>
                                        <br>
                                        <br>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row g-2">
                                        <div class="col-2">
                                            <div class="form-check form-switch">
                                                <label class="form-check-label" for="isEntityFileId">生成entity文件</label>
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="isEntityFileId" checked>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-check form-switch">
                                                <label class="form-check-label"
                                                    for="isInterfaceFileId">生成mapper接口</label>
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="isInterfaceFileId" checked>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-check form-switch">
                                                <label class="form-check-label" for="isXmlFileId">生成mapper xml</label>
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="isXmlFileId" checked>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-check form-switch">
                                                <label class="form-check-label"
                                                    for="isInterfaceFileId">生成service接口</label>
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="isServiceFileId" checked>
                                            </div>
                                        </div>
                                        <div class="col-2">
                                            <div class="form-check form-switch">
                                                <label class="form-check-label" for="isInterfaceFileId">生成service
                                                    impl接口</label>
                                                <input class="form-check-input" type="checkbox" role="switch"
                                                    id="isServiceImplFileId" checked>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="row g-2">
                                        <div class="col-2">
                                            <div class="input-group mb-3">
                                                <label for="authorId" class="input-group-text">作者</label>
                                                <input type="text" class="form-control" id="authorId" />
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

                    </form>
                    <br>
                    <button type="button" class="btn btn-success" onclick="generateFile()">生成文件</button>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- JavaScript Bundle with Popper -->
<script src="../js/bootstrap.js"></script>
<script type="text/javascript">
    const vscode = acquireVsCodeApi();
    // 当为文本时需要全是\\
    const mysqlJdbcRegex = /^jdbc:mysql:\/\/([\da-zA-Z-\.]+):(\d+)\/([A-Za-z0-9_]+)(\?(\S*))?$/;
    const oracleJdbcRegex = /^jdbc:oracle:thin:@([\da-zA-Z-\.]+):(\d+):([A-Za-z0-9_]+)$/;
    // const mysqlJdbcRegex = /^jdbc:mysql:\\/\\/([\\da-zA-Z-\\.]+):(\\d+)\\/([A-Za-z0-9_]+)(\\?(\\S*))?$/;
    // const oracleJdbcRegex = /^jdbc:oracle:thin:@([\\da-zA-Z-\\.]+):(\\d+):([A-Za-z0-9_]+)$/;

    window.addEventListener('message', event => {
        const msg = event.data;
        console.log('webview 接收到消息', msg);
        let data = msg.data;
        let type = msg.type;
        switch (msg.command) {
            case 'dbListResult':
                clearList('dbConfiglist');
                let tb = document.getElementById('dbConfiglist');
                for (let i = 0; i < data.length; i++) {
                    let x = tb.insertRow();
                    let cell = x.insertCell();
                    cell.innerHTML = data[i]["tag"];
                    cell = x.insertCell();
                    cell.innerHTML = data[i]["host"];
                    cell = x.insertCell();
                    cell.innerHTML = data[i]["port"];
                    cell = x.insertCell();
                    cell.innerHTML = data[i]["url"];
                    cell = x.insertCell();
                    cell.innerHTML = `<button class="btn" onclick="removeDbConfig(${i}, '${data[i]["tag"]}')"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                            </svg></button>`;
                }
                break;
            case 'dataTypeResult':
                clearList('type-table');
                let typeTable = document.getElementById('type-table');
                for (let i = 0; i < data.length; i++) {
                    let x = typeTable.insertRow();
                    let cell = x.insertCell();
                    cell.innerHTML = showColumnTypes(data[i]["columnType"]);
                    cell = x.insertCell();
                    cell.innerHTML = showJavaTypes(data[i]["javaType"]);
                    cell = x.insertCell();
                    cell.innerHTML = `<button class="btn" onclick="removeDbTypeConfig(${i})"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                            </svg></button>`;
                }
                break;
            case 'listDbEnvResult':
                let envSelect = document.getElementById('dbEnvId');
                let options = '';
                for (let d of data) {
                    let option = '<option value="' + d.tag + '">' + d.tag + '</option>';
                    options = options + option;
                }
                envSelect.innerHTML = options;
                break;
            case 'loadTagDbConfigResult':
                if (data) {
                    if (type === 'mysql') {
                        document.getElementById('db_mysql_tag').value = data.tag;
                        document.getElementById('db_mysql_url').value = data.url;
                        document.getElementById('db_mysql_host').value = data.host;
                        document.getElementById('db_mysql_port').value = data.port;
                        document.getElementById('db_mysql_database').value = data.database;
                        document.getElementById('db_mysql_user').value = data.user;
                        document.getElementById('db_mysql_password').value = data.password;
                    } else if (type === 'oracle') {
                        console.log(data);
                        document.getElementById('db_oracle_tag').value = data.tag;
                        document.getElementById('db_oracle_url').value = data.url;
                        document.getElementById('db_oracle_host').value = data.host;
                        document.getElementById('db_oracle_port').value = data.port;
                        document.getElementById('db_oracle_sid').value = data.sid;
                        document.getElementById('db_oracle_user').value = data.user;
                        document.getElementById('db_oracle_password').value = data.password;
                    } else {
                        return;
                    }
                }
                break;
            default:
                ;
        }
    });

    jump('strategyConfig');

    /** 清理table */
    function clearList(tableId) {
        let tb = document.getElementById(tableId);
        var rowNum = tb.rows.length;
        for (i = 1; i < rowNum; i++) {
            tb.deleteRow(i);
            rowNum = rowNum - 1;
            i = i - 1;
        }
    }


    /** 通过nav切换页面 */
    function jump(pageId) {
        let pageIds = ['dbConfig', 'strategyConfig', 'typeConfig'];
        pageIds.forEach((id, index, arr) => {
            document.getElementById(id).style.display = "none";
        });
        if (pageId === 'dbConfig') {
            dbList('mysql');
        }
        if (pageId === 'strategyConfig') {
            listDbEnv('mysql');
        }
        if (pageId === 'typeConfig') {
            listDataType('mysql')
        }

        document.getElementById(pageId).style.display = "block";
    }

    /** 打开配置文件 */
    function openConfigFile() {
        vscode.postMessage({
            command: 'openConfigFile',
        });
    }

    function changeTheme() {
        // 获取当前主题
        let lightDisplay = document.getElementById("lightThemeId").style.display;
        let darkDisplay = document.getElementById("darkThemeId").style.display;
        let currentCss = document.getElementById("themeLinkId").href;
        // 当前为明亮主题 切换到暗色
        if (lightDisplay === 'block') {
            document.getElementById("darkThemeId").style.display = 'block';
            document.getElementById("lightThemeId").style.display = 'none';
            document.getElementById("themeLinkId").href = currentCss.replace('light', 'dark');
        }
        // 当前为暗色主题 切换到明亮
        if (darkDisplay === 'block') {
            document.getElementById("lightThemeId").style.display = 'block';
            document.getElementById("darkThemeId").style.display = 'none';
            document.getElementById("themeLinkId").href = currentCss.replace('dark', 'light');
        }

    }

    // ~ ------------------------------------------------------------------------------------------------------------
    // 数据库配置
    // ~ ------------------------------------------------------------------------------------------------------------
    function loadTagDbConfig(type) {
        let tag = document.getElementById(type === 'mysql' ? 'db_mysql_tag' : 'db_oracle_tag').value;
        console.log('加载tag', type, tag);
        if (type && tag) {
            vscode.postMessage({
                command: 'loadTagDbConfig',
                type: type,
                data: {
                    tag: tag
                }
            });
        }
    }

    function removeDbConfig(rowNumber, tag) {
        let tb = document.getElementById('dbConfiglist');
        tb.deleteRow(rowNumber + 1);
        let type = document.getElementById("nav-mysql-config-tab").ariaSelected == "true" ? "mysql" : "oracle";
        if (tag) {
            vscode.postMessage({
                type: type,
                command: "removeDbConfig",
                data: {
                    tag: tag
                }
            });
        }
    }

    function changeDbTab(type) {
        dbList(type);
    }

    function dbList(type) {
        vscode.postMessage({
            command: 'dbList',
            type: type
        });
    }

    function dbSave(type) {
        if (type === 'mysql') {
            data = getMysqlDBFormData();
        } else if (type === 'oracle') {
            data = getOracleDBFormData();
        } else {
            return;
        }

        console.log('保存数据:', data);
        vscode.postMessage({
            command: 'dbSave',
            type: type,
            data: data
        });
        // 重新加载配置
        dbList(type);
    }

    function dbConnectTest(type) {
        if (type === 'mysql') {
            data = getMysqlDBFormData();
        } else if (type === 'oracle') {
            data = getOracleDBFormData();
        } else {
            return;
        }

        console.log('连接测试:', data);
        vscode.postMessage({
            command: 'dbConnectTest',
            type: type,
            data: data
        });
    }

    function dbReset(type) {
        if (type === 'mysql') {
            document.getElementById('db_mysql_tag').value = '';
            document.getElementById('db_mysql_url').value = '';
            document.getElementById('db_mysql_host').value = '';
            document.getElementById('db_mysql_port').value = '';
            document.getElementById('db_mysql_database').value = '';
            document.getElementById('db_mysql_user').value = '';
            document.getElementById('db_mysql_password').value = '';
        } else if (type === 'oracle') {
            document.getElementById('db_oracle_tag').value = '';
            document.getElementById('db_oracle_url').value = '';
            document.getElementById('db_oracle_host').value = '';
            document.getElementById('db_oracle_port').value = '';
            document.getElementById('db_oracle_user').value = '';
            document.getElementById('db_oracle_password').value = '';
        } else {
            return;
        }
    }

    function getMysqlDBFormData() {
        return {
            url: document.getElementById('db_mysql_url').value,
            tag: document.getElementById('db_mysql_tag').value,
            host: document.getElementById('db_mysql_host').value,
            port: document.getElementById('db_mysql_port').value,
            database: document.getElementById('db_mysql_database').value,
            user: document.getElementById('db_mysql_user').value,
            password: document.getElementById('db_mysql_password').value,
        }
    }


    function getOracleDBFormData() {
        return {
            url: document.getElementById('db_oracle_url').value,
            tag: document.getElementById('db_oracle_tag').value,
            host: document.getElementById('db_oracle_host').value,
            port: document.getElementById('db_oracle_port').value,
            sid: document.getElementById('db_oracle_sid').value,
            user: document.getElementById('db_oracle_user').value,
            password: document.getElementById('db_oracle_password').value,
        }
    }

    function urlDecode(type) {
        if (type === 'mysql') {
            let mysqlJdbc = document.getElementById('db_mysql_url').value.trim();
            let matchGroups = mysqlJdbc.match(mysqlJdbcRegex);
            if (matchGroups.length === 0) {
                throw new Error("jdbc url错误");
            }
            console.log('匹配结果', matchGroups);
            document.getElementById('db_mysql_host').value = matchGroups[1];
            document.getElementById('db_mysql_port').value = matchGroups[2];
            document.getElementById('db_mysql_database').value = matchGroups[3];

            let parameters = matchGroups[5].split('&')
            let paramMap = {}
            if (parameters) {
                for (let param of parameters) {
                    let entry = param.split('=');
                    if (entry.length === 2) {
                        paramMap[entry[0]] = entry[1];
                    }
                }
            }
            document.getElementById('db_mysql_user').value = paramMap['user'];
            document.getElementById('db_mysql_password').value = paramMap['password'];
        } else if (type === 'oracle') {
            let oracleJdbc = document.getElementById('db_oracle_url').value.trim();
            let matchGroups = oracleJdbc.match(oracleJdbcRegex);
            if (matchGroups.length === 0) {
                throw new Error("jdbc url错误");
            }
            console.log('匹配结果', matchGroups);
            document.getElementById('db_oracle_host').value = matchGroups[1];
            document.getElementById('db_oracle_port').value = matchGroups[2];
            document.getElementById('db_oracle_sid').value = matchGroups[3];
        } else {
            throw new Error("不支持的数据库类型");
        }
    }

    function listDbEnv(type) {
        if (document.getElementById('listDbEnv1').checked) {
            type = 'mysql';
        } else if (document.getElementById('listDbEnv2').checked) {
            type = 'oracle';
        }
        vscode.postMessage({
            command: 'listDbEnv',
            type: type
        });
    }

    // ~ ------------------------------------------------------------------------------------------------------------
    // 类型映射配置
    // ~ ------------------------------------------------------------------------------------------------------------
    function listDataType(type) {
        if (document.getElementById('flexRadioDefault1').checked) {
            type = 'mysql';
        } else if (document.getElementById('flexRadioDefault2').checked) {
            type = 'oracle';
        }
        if (type !== 'mysql' && type !== 'oracle') {
            throw new Error("不支持的数据库类型");
        }
        vscode.postMessage({
            command: 'dataType',
            type: type
        });
    }

    function removeDbTypeConfig(rowNumber) {
        console.log('remove row', rowNumber);
        let typeTable = document.getElementById('type-table');
        typeTable.deleteRow(rowNumber + 1);

        saveDataType();
    }

    function showColumnTypes(currentType) {
        return '<input type="text" class="form-control" placeholder="字段类型正则表达式" value="' + currentType + '">';
    }

    function showJavaTypes(currentType) {
        let javaTypes = ['java.lang.Boolean',
            'java.lang.Integer',
            'java.lang.Long',
            'java.math.BigDecimal',
            'java.util.Date',
            'java.lang.String'];

        let selectHtml = '<select class="form-select" aria-label="javaTypeSelector">'
        for (let javaType of javaTypes) {
            let flag = currentType === javaType ? 'selected' : '';
            let option = '<option value="' + javaType + '" ' + flag + '>' + javaType + '</option>';
            selectHtml = selectHtml + option;
        }
        selectHtml = selectHtml + '</select>';
        return selectHtml;
    }

    function addDataType() {
        console.log('addDataType');
        let tableType = document.getElementById('type-table');
        let x = tableType.insertRow();
        let cell = x.insertCell();
        cell.innerHTML = showColumnTypes('');
        cell = x.insertCell();
        cell.innerHTML = showJavaTypes('');
    }

    function saveDataType() {
        let type = 'mysql';
        document.getElementsByName('dbType').forEach(item => {
            if (item.checked) {
                type = item.value;
                return;
            }
        });
        let tableType = document.getElementById('type-table');
        let data = [];
        for (let index = 1; index < tableType.rows.length; index++) {
            let element = tableType.rows[index];
            let cellData = { columnType: '', javaType: '' };
            let columnType = element.cells[0].children[0].value;
            let javaType = element.cells[1].children[0].value;
            cellData.columnType = columnType;
            cellData.javaType = javaType;
            data.push(cellData);
        }

        console.log('saveDataType', type, data);
        vscode.postMessage({
            command: 'saveDataType',
            type: type,
            data: data
        });


    }

    // ~ ------------------------------------------------------------------------------------------------------------
    // 策略配置
    // ~ ------------------------------------------------------------------------------------------------------------

    function generateFile() {
        let type = 'mysql';
        document.getElementsByName('dbEnv').forEach(item => {
            if (item.checked) {
                type = item.value;
                return;
            }
        });

        let data = {
            type: type,
            tag: document.getElementById('dbEnvId').value,
            tableName: document.getElementById('tableNameId').value,
            tablePrefix: document.getElementById('tablePrefix').value,

            projectPath: document.getElementById('projectPathId').value,
            parentPackage: document.getElementById('parentPackageId').value,
            entityPath: document.getElementById('entityPathId').value,
            interfacePath: document.getElementById('interfacePathId').value,
            servicePath: document.getElementById('servicePathId').value,
            xmlPath: document.getElementById('xmlPathId').value,

            author: document.getElementById('authorId').value,
            classSuffix: document.getElementById('classSuffixId').value,
            isUseLombok: document.getElementById('isUseLombokId').checked,
            isSwagger: document.getElementById('isSwaggerId').checked,
            isMybatisPlus: document.getElementById('isMybatisPlusId').checked,
            idType: document.getElementById('idTypeId').value,

            isEntityFile: document.getElementById('isEntityFileId').checked,
            isInterfaceFile: document.getElementById('isInterfaceFileId').checked,
            isXmlFile: document.getElementById('isXmlFileId').checked,
            isServiceFile: document.getElementById('isServiceFileId').checked,
            isServiceImplFile: document.getElementById('isServiceImplFileId').checked,
        }

        console.log('文件生成组装参数', data);

        vscode.postMessage({
            command: 'generateFile',
            type: type,
            data: data
        });


    }


</script>